<script setup>

import {onBeforeUnmount, onMounted, ref} from "vue";
import NavMenu from "@/components/utils/navMenu.vue";
import AUTnavMM from "@/components/utils/AUTnavMM.vue";
import {aGetAlbumNum, aGetSingerNum, aGetSongNum, aGetUserNum, aUserNumChange} from "@/api/api.js";
import * as echarts from "echarts";

const childRef = ref(null)
let isCollapse = ref(true)
let default_index = '1'
let onlineNum = ref(0)
let timeDay = ref()
let nowTime = ref()
let timer = 0
let userNum = ref({
  total: 0,
  youth: 0,
  middle: 0,
  old: 0,
})
let songNum = ref(0)
let albumNum = ref(0)
let singerNum = ref(0)
let userChangNum = ref([])
const lineChart = ref();
const myChart = ref();


onMounted(() => {
  timeDay.value = formatDate()
  timer = setInterval(() => {
    nowTime.value = formatTime()
  }, 1000)
  startData()
})
onBeforeUnmount(() => {
  clearInterval(timer) //清除定时器
  timer = 0
})
/**
 * 将小于10的数字前面补0
 * @function
 * @param {number} value
 * @returns {string} 返回补0后的字符串
 */
const complement = (date) => {
  return date < 10 ? `0${date}` : date.toString()
}
/**
 * 格式化时间为XXXX年XX月XX日XX时XX分XX秒
 * @function
 * @returns {string} 返回格式化后的时间
 */
const formatDate = () => {
  const date = new Date()
  const year = date.getFullYear()
  const month = complement(date.getMonth() + 1)
  const day = complement(date.getDate())
  const week = '星期' + '日一二三四五六'.charAt(date.getDay());
  return `${year} 年 ${month} 月 ${day} 日 ${week}`
}
const formatTime = () => {
  const date = new Date()
  return date.toTimeString().substring(0, 8)
}

function showMenu() {
  // 修改子组件数据
  childRef.value.show()
}

function startData() {
  getUserNum()
  selectSongNum()
  selectAlbumNum()
  selectSingerNum()
  selectUserChange()
}

function getUserNum() {
  aGetUserNum().then(resp => {
    if (resp.data.code === 200) {
      userNum.value.total = resp.data.data.total
      userNum.value.youth = resp.data.data.youth
      userNum.value.middle = resp.data.data.middle
      userNum.value.old = resp.data.data.old
      showCharts();
    } else {
      console.log(resp.data.msg)
    }
  })
}

function selectSongNum() {
  aGetSongNum().then(resp => {
    if (resp.data.code === 200) {
      songNum.value = resp.data.data
    } else {
      console.log(resp.data.msg)
    }
  })
}

function selectAlbumNum() {
  aGetAlbumNum().then(resp => {
    if (resp.data.code === 200) {
      albumNum.value = resp.data.data
    } else {
      console.log(resp.data.msg)
    }
  })
}

function selectSingerNum() {
  aGetSingerNum().then(resp => {
    if (resp.data.code === 200) {
      singerNum.value = resp.data.data
    } else {
      console.log(resp.data.msg)
    }
  })
}

function selectUserChange() {
  aUserNumChange().then(resp => {
    if (resp.data.code === 200) {
      userChangNum.value = resp.data.data
      showLineCharts();
    } else {
      console.log(resp.data.msg)
    }

  })
}

/* 图表*/
function showCharts() {
  //通过ref获取html元素
  let smyChart = echarts.init(myChart.value, 'light')
  smyChart.setOption({
    title: {
      text: userNum.value.total,
      subtext: '用户数',
      left: 'center',
      top: '43%',
      subtextStyle: {
        fontSize: 18
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      icon: 'circle',
      top: '0',
      left: 'right'
    },
    series: [
      {
        name: '年龄阶段',
        type: 'pie',
        radius: ['40%', '55%'],
        label: {
          show: true,
          padding: [0, -60],
          overflow: 'none',
          fontSize: '15',
          fontWeight: 'bold',
          formatter: '{d}%\n\n{c}'
        },
        labelLine: {
          show: true,
          length: 15,
          length2: 60
        },
        itemStyle: {
          normal: {
            color: function (params) {
              let colorList = ['#4FC3F7', '#00C853', '#F57F17']
              return colorList[params.dataIndex]
            }
          }
        },
        data: [
          {name: '青年', value: userNum.value.youth},
          {name: '中年', value: userNum.value.middle},
          {name: '老年', value: userNum.value.old}
        ]
      }
    ]
  })
}

function showLineCharts() {

  let slineChart = echarts.init(lineChart.value, 'light')
  slineChart.setOption({
    title: {
      text: '2023用户数据分析'
    },
    // 提示框
    tooltip: {
      trigger: 'axis'
    },
    // 图例
    legend: {
      icon: 'circle',
      left: 'center',
      top: 0,
      data: ['用户']
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '3%',
      containLabel: true
    },
    // 工具栏
    toolbox: {
      feature: {
        saveAsImage: {
          type: 'png'
        },
        magicType: {
          type: ['line', 'bar']
        }
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '用户',
        type: 'line',
        // smooth: true, // 平滑曲线显示
        data: userChangNum.value
      },
    ]
  })
}
</script>

<template>
  <AUTnavMM></AUTnavMM>
  <div class="mmContent">
    <nav-menu ref="childRef" :default_index="default_index"></nav-menu>
    <div class="sysInfo_mod">
      <el-scrollbar>
        <div class="box_mod" id="box_md">
          <el-row :gutter="16">
            <el-col :span="8">
              <div class="statistic-card">
                <el-statistic :value=timeDay>
                  <template #title>
                    <div style="display: inline-flex; align-items: center">
                      <span style="font-size: 20px;">当前时间</span>
                    </div>
                  </template>
                </el-statistic>
                <el-statistic :value=nowTime></el-statistic>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="statistic-card" style="padding-left: 175px;">
                <el-statistic :value=userNum.total title="New transactions today">
                  <template #title>
                    <div style="display: inline-flex; align-items: center">
                      用户人数
                    </div>
                  </template>
                </el-statistic>
                <div class="statistic-footer">
                  <div class="footer-item">
                    <span>than yesterday</span>
                    <span class="green">
                    {{ 1 }}
                    <el-icon>
                      <CaretTop/>
                    </el-icon>
                  </span>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="box_mod" id="box_md">
          <el-row :gutter="16">
            <el-col :span="8">
              <router-link to="/songLibrary" style="text-decoration: none;">
                <div class="statistic-card">
                  <el-statistic :value="songNum">
                    <template #title>
                      <div>
                        歌曲数
                      </div>
                    </template>
                  </el-statistic>
                  <div class="statistic-footer">
                    <div class="footer-item">
                      <span>month on month</span>
                      <span class="green">
                            <el-icon>
                              <CaretTop/>
                            </el-icon>
                          </span>
                    </div>
                  </div>
                </div>
              </router-link>
            </el-col>
            <el-col :span="8">
              <router-link to="/songLibrary" style="text-decoration: none;">
                <div class="statistic-card">
                  <el-statistic :value="albumNum">
                    <template #title>
                      <div>
                        专辑数
                      </div>
                    </template>
                  </el-statistic>
                  <div class="statistic-footer">
                    <div class="footer-item">
                      <span>month on month</span>
                      <span class="green">
                            <el-icon>
                              <CaretTop/>
                            </el-icon>
                          </span>
                    </div>
                  </div>
                </div>
              </router-link>
            </el-col>
            <el-col :span="8">
              <div class="statistic-card" style="padding-left: 175px;">
                <el-statistic :value="singerNum" title="New transactions today">
                  <template #title>
                    <div style="display: inline-flex; align-items: center">
                      歌手数
                    </div>
                  </template>
                </el-statistic>
                <div class="statistic-footer">
                  <div class="footer-item">
                    <span>month on month</span>
                    <span class="green">
                          <el-icon>
                            <CaretTop/>
                          </el-icon>
                        </span>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>

        <div class="small_box_container">
          <div class="small_box_mod">
            <div class="charts_mm_mod">
              <div ref="myChart" class="chart_mod">
              </div>
            </div>
          </div>

          <div class="small_box_mod">
            <div class="charts_mm_mod">
              <div ref="lineChart" class="chart_mod">
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>


<style scoped>
.box_mod {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0px 0px 6px 1px #ececec;
  margin-bottom: 20px;
  padding: 20px 30px;
}

/*小盒子容器*/
.small_box_container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

/*小盒子模块*/
.small_box_mod {
  width: 45%;
  background-color: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0px 0px 6px 1px #ececec;
  padding: 20px 30px;
}

.mmContent {
  display: flex;
  background-color: #f5f6fa;
  max-height: 836px;
}

/*系统资料模块*/
.sysInfo_mod {
  width: 80%;
  padding-left: 20px;
  padding-top: 20px;
}

#box_md >>> .el-row {
  justify-content: space-around;
  align-items: center;
  height: 150px;
}

.charts_mm_mod {
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart_mod {
  width: 100%;
  height: 400px;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 20px;
}
</style>